<template>
	<view class="container">
		<!-- <view class="bg"></view> -->
		<image class="bg" src="/static/image/图层 1@2x.png" mode=""></image>
		<!-- 自定义导航栏 -->
		<view class="custom-nav" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="title">首 页</view>
		</view>
		<uni-search-bar bgColor="white" placeholder="搜索" @confirm="search" cancelButton='none' radius="25">
			<template v-slot:searchIcon>
				<image class="img" src="/static/image/定位2@2x.png" mode=""></image>
			</template>
			<template v-slot:clearIcon>
				<image class="img2" src="/static/image/刷新 (1)@2x.png" mode=""></image>
			</template>
		</uni-search-bar>

		<uni-card padding="0" style="border-radius: 30rpx;" margin="20rpx" spacing="0">
			<view class="function-grid">
				<view class="function-item" v-for="(item, index) in functions" :key="index">
					<navigator :url="item.toURL">
						<view class="function-icon" :style="{ backgroundColor: item.color }">
							<image :src="item.icon" class="icon-img"></image>
						</view>
						<text class="function-name">{{ item.name }}</text>
					</navigator>
				</view>
			</view>
		</uni-card>

        <uni-card class="custom-card" margin="20rpx" spacing="0" title="附近加油站" sub-title="根据您的位置推荐最近的加油站" extra="更多 >" @click="onGasCardClick">
            <view class="map">
                <map :longitude="longitude" :latitude="latitude"></map>
            </view>
        </uni-card>
        <uni-card style="border-radius: 30rpx;" padding="5px 10px" margin="20rpx" spacing="0" title="优惠团购"
            sub-title="钜惠来袭 为您的爱车护航" extra="更多 >" @click="onCardClick">
            <view class="discount-grid">
                <view class="discount-item" v-for="(item, index) in discounts" :key="index">
                    <image :src="item.image" class="discount-image"></image>
                    <text class="discount-text">{{ item.text }}</text>
                </view>
            </view>
        </uni-card>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 响应式数据
const statusBarHeight = ref(0); // 状态栏高度
const longitude = ref(116.397470);
const latitude = ref(39.908823);

// 功能图标数据
const functions = [
	{
		name: '车辆维修',
		icon: '/static/image/车辆维修1-01@3x.png',
		color: '#4A90E2',
		toURL: "/pages/index/repair/repair"
	},
	{
		name: '汽车保养',
		icon: '/static/image/保养@3x.png',
		color: '#FF9500',
		toURL: "/pages/index/carMaintenance/carMaintenance"
	},
	{
		name: '专业洗车',
		icon: '/static/image/洗车@3x.png',
		color: '#4CD964',
		toURL: "/pages/index/washCar/wash/wash"
	},
	{
		name: '就近加油',
		icon: '/static/image/加油枪 (1)@3x.png',
		color: '#5AC8FA',
		toURL: "/pages/index/refuelNearby/refuelNearby"
	}
];

// 优惠团购数据
const discounts = [
	{
		image: '/static/image/图层 1@2x.png',
		text: '汽车惠民活动走进...'
	},
	{
		image: '/static/image/图层 1@2x.png',
		text: '汽车惠民活动走进...'
	},
	{
		image: '/static/image/图层 1@2x.png',
		text: '汽车惠民活动走进...'
	},
	{
		image: '/static/image/图层 1@2x.png',
		text: '汽车惠民活动走进...'
	}
];

// 方法
const onBack = () => {
	// 实现返回功能
	uni.navigateBack();
};

const search = () => {
    // 搜索事件逻辑，需根据需求补充
};

const getLocationInfo = () => {
	uni.getLocation({
		success: (res) => {
			console.log(res);
			latitude.value = res.latitude;
			longitude.value = res.longitude;
			console.log('赋值后的纬度：', latitude.value);
			console.log('赋值后的经度：', longitude.value);
		}
	});
};

// 选择位置
const choose = () => {
	// 在web端使用其他方式获取位置，例如HTML5的Geolocation API
	// #ifdef H5
	navigator.geolocation.getCurrentPosition(
		position => {
			console.log(position.coords.latitude, position.coords.longitude);
			latitude.value = position.coords.latitude;
			longitude.value = position.coords.longitude;
		},
		error => {
			console.error(error);
		}
	);
	// #endif
	// #ifndef H5
	uni.chooseLocation({
		success: (resp) => {
			console.log(resp);
			latitude.value = resp.latitude;
			longitude.value = resp.longitude;
		}
	});
	// #endif
};

const goGroupBuyingDeals = () => {
    uni.navigateTo({
        url: '/pages/index/groupBuyingDeals/groupBuyingDeals'
    });
};

const onCardClick = (type) => {
    if (type === 'extra') {
        goGroupBuyingDeals();
    }
};

const onGasCardClick = (type) => {
    if (type === 'extra') {
        uni.navigateTo({
            url: '/pages/index/refuelNearby/refuelNearby'
        });
    }
};

// 生命周期钩子
onMounted(() => {
	// 获取状态栏高度，使用推荐的wx.getWindowInfo API
	try {
		const windowInfo = uni.getWindowInfo();
		statusBarHeight.value = windowInfo.statusBarHeight;
	} catch (error) {
		console.error('获取窗口信息失败:', error);
		statusBarHeight.value = 0;
	}
	
	// 获取位置信息
	getLocationInfo();
});
</script>

<style scoped>
	::v-deep .custom-card {
		border-radius: 30rpx !important;
		overflow: hidden;
	}

	.custom-nav {
		height: 44px;
		/* 导航栏主体高度，可自定义 */
		display: flex;
		align-items: center;
		background-color: #fff;
		border-bottom: 1px solid #eee;
	}

	.title {
		flex: 1;
		text-align: center;
		color: white;
		z-index: 1;
	}

	.bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 400rpx;
		/* background-image: url('/static/image/图层 1@2x.png'); */
		/* background-size: cover; */
		/* background-position: center; */
		z-index: 0;
	}

	.img {
		width: 40rpx;
		height: 40rpx;
		vertical-align: middle;
		margin-left: 30rpx;
	}

	.img2 {
		width: 40rpx;
		height: 40rpx;
		vertical-align: middle;
		margin-right: 30rpx;
	}

	map {
		width: 100%;
		height: 350rpx;
	}

	.container {
		width: 100%;
		min-height: 100vh;
		background-color: #F5F7FA;
		display: flex;
		flex-direction: column;
		position: relative;
		overflow-x: hidden;
	}

	/* 功能快捷入口样式 */
	.function-grid {
		background-color: white;
		padding: 15px 5rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		margin-top: 10rpx;
	}

	.function-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 25%;
	}

	.function-icon {
		width: 50px;
		height: 50px;
		border-radius: 15px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 5px;
	}

	.icon-img {
		width: 30px;
		height: 30px;
		tint-color: white;
	}

	.function-name {
		font-size: 12px;
		color: #333333;
	}

	/* 优惠团购样式 */
	.discount-grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.discount-item {
		width: 48%;
		margin-top: 5px;
	}

	.discount-image {
		width: 100%;
		height: 70px;
		border-radius: 8px;
		object-fit: cover;
	}

	.discount-text {
		font-size: 10px;
		color: #333333;
		margin-top: 5rpx;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
</style>